<template>

    <div>
        <div class="classSearchBox" v-loading="loading">
            <el-form :inline="true" ref="form">
                <el-button @click="addClassVisible = true" type="primary" style="margin-left: 100px;">添加</el-button>
                <span style="margin-left: 580px;">分类名称：</span>
                <el-input
                        style="width: 200px;"
                        placeholder="请输入分类名称"
                        v-model="name">
                </el-input>
                <el-button type="primary" icon="el-icon-search" circle @click="handleSearch"></el-button>
                <el-button round @click="handleReset">重置</el-button>

            </el-form>
        </div>
        <div class="classTableBox">
            <el-table
                    :data="list"
                    border
                    style="width: 1081px">

                <el-table-column
                        align="center"
                        prop="name"
                        label="分类名称"
                        width="200">
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="type_name"
                        label="分类类型"
                        width="200">
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="parent_name"
                        label="上级分类"
                        width="200">
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="icon"
                        label="图标"
                        width="180">
                    <template slot-scope="scope">
                        <el-image
                                style="width: 50px; height: 50px"
                                :src="scope.row.icon"
                                fit="contain"></el-image>
                    </template>
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="create_time"
                        label="创建时间"
                        width="200">
                </el-table-column>

                <el-table-column align="center" width="100">
                    <template slot-scope="scope">
                        <el-button
                                @click="handleClassDelete(scope.row.id)"
                                icon="el-icon-delete"
                                size="mini"
                                type="danger"
                                round>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="classPage">
            <el-pagination
                    v-if="classPageVisible"
                    background
                    layout="prev, pager, next"
                    :page-size="10"
                    :total="total"
                    @current-change="handlePage"
            >

            </el-pagination>
        </div>

        <el-dialog title="添加分类" :visible.sync="addClassVisible">
            <el-form ref="addClassForm" :model="addClassData" :rules="rules">
                <el-form-item prop="name" style="width: 600px" label="分类名称" :label-width="formLabelWidth">
                    <el-input placeholder="请输入分类名称" v-model="addClassData.name"></el-input>
                </el-form-item>
                <el-form-item prop="type_id"  label="分类类型" :label-width="formLabelWidth">
                    <el-select style="width: 300px" v-model="addClassData.type_id" placeholder="分类类型">
                        <el-option label="餐饮" value="1"></el-option>
                        <el-option label="商城" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="parent_id"  label="上级分类" :label-width="formLabelWidth">
                    <el-select style="width: 300px" v-model="addClassData.parent_id" placeholder="请选择上级分类">
                        <el-option
                                v-for="item in classList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  prop="sort" style="width: 600px" label="排序" :label-width="formLabelWidth">
                    <el-input placeholder="请输入排序" v-model="addClassData.sort"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addClassVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleAddClass('addClassForm')">确 定</el-button>
            </div>
        </el-dialog>

        <div style="height: 100px"></div>
    </div>
</template>

<script>

    export default {
        name: 'goodsMerchant',
        data(){
            return{
                list: [],
                loading: false,
                total: 0,
                name: '',
                classPageVisible: true,
                addClassVisible: false,
                addClassData: {},
                formLabelWidth: '300px',
                classList: [],
                rules: {
                    name: [{required: true, message: '请输入分类名称', trigger: 'blur'}],
                    parent_id: [{required: true, message: '请选择上级分类', trigger: 'blur'}],
                    sort: [{required: true, message: '请输入排序', trigger: 'blur'}],
                    type_id: [{required: true, message: '请选择分类类型', trigger: 'blur'}],
                }
            }
        },
        methods:{
            defaultData(page,name){
                this.loading = true;
                this.$http.get('/web/store/class/list',{
                    params: {
                        token: localStorage.getItem('user_token'),
                        page: page,
                        pageSize: 10,
                        name: name
                    }
                }).then(response => {
                    if (response.data.status === 'success'){
                        this.list = response.data.data.list;
                        this.total = response.data.data.pagination.total;
                        if (response.data.data.pagination.total <= 10 ){
                            this.classPageVisible = false;
                        }
                    }
                    this.loading = false;
                }).catch(error => {
                    this.loading = false;
                })
            },

            handleReset(){
                this.name = '';
                this.defaultData();
            },

            handleSearch(){
                this.defaultData(1,this.name);
            },

            handlePage(page){
                this.defaultData(page);
            },

            getClassData(){
                this.loading = true;
                this.$http.get('/web/store/class/list',{
                    params: {
                        token: localStorage.getItem('user_token'),
                        pageSize: 999,
                    }
                }).then( response => {
                    if (response.data.status === 'success'){
                        this.classList = response.data.data.list
                        this.classList.unshift({id: 0, name: '没有上级'})
                    }
                    this.loading = false;
                }).catch( () => {
                    this.loading = false;
                })
            },

            handleClassDelete(id){
                this.$confirm('是否删除该分类?', '删除分类', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading = true;
                    this.$http.get('/web/store/class/del',{
                        params: {
                            token: localStorage.getItem('user_token'),
                            id: id
                        }
                    }).then(response => {
                        if (response.data.status === 'success'){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.defaultData();
                        }
                        this.loading = false;
                    }).catch(error => {
                        console.log(error);
                        this.loading = false;
                    })

                });
            },

            handleAddClass(name){

                this.$refs[name].validate((valid) => {
                    if (!valid){
                        return false;
                    }
                })

                this.addClassData.token = localStorage.getItem('user_token');
                this.loading = true;
                this.$http.post('web/store/class/add',this.addClassData).then(response => {
                    if (response.data.status === 'success') {
                        this.$message.success('添加成功');
                        this.addClassVisible = false;
                        this.addClassData = {};
                        this.defaultData();
                    }
                    this.loading = false;
                }).catch( () => {
                    this.loading = false;
                })
            },

            handleAddGoodsClass(){
                this.$router.push({name: 'addGoodsMerchant'})
            },

            handleClassUpdate(id){
                this.$router.push({name: 'updateGoodsMerchant', query: {id: id}})
            }
        },
        mounted() {
            this.defaultData();
            this.getClassData();
        }
    }
</script>

<style>
    .classTableBox{
        margin-top: 24px;
        margin-left: 150px;
    }
    .classSearchBox{
        margin-top: 50px;
        margin-left: 50px;
    }
    .classPage{
        margin-top: 24px;
        margin-left: 550px;
    }
</style>
